<template>
    <div>
        <myheader/>
        <van-tabs v-model="active">
                <van-tab title="用户名登录">
                        <van-field style="width:300px"
                        v-model="username"
                        name="username"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                      />
                      <van-field style="width:300px"
                        v-model="password"
                        type="password"
                        name="password"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                      />
                       <drag-verify
                                :width='width'
                                :height='height'
                                success-text='验证成功'
                                text='向右滑动验证'
                                ref="Verify"
                            />
                            <van-button 
                            round block type="primary" 
                            native-type="submit" 
                            style="width: 100px;margin-left: 90px;margin-top: 20px"
                             @click="ulogin">登录</van-button>

                </van-tab>
                <van-tab title="手机号登录">

                                <van-field style="width:300px"
                                  v-model="mobile"
                                  name="mobile"
                                  label="手机号"
                                  placeholder="手机号"
                                  :rules="[{ required: true, message: '请填写手机号' }]"
                                />
                                <van-button type="info" @click='sendSms'>发送验证码</van-button>
                                <van-field style="width:300px"
                                  v-model="code"
                                  name="code"
                                  label="验证码"
                                  placeholder="验证码"
                                  :rules="[{ required: true, message: '请填写验证码' }]"
                                />
                            <van-button
                             round block type="primary"
                             native-type="submit"
                             style="width: 100px;margin-left: 90px;margin-top: 20px"
                             @click="mlogin">手机登录</van-button>
                
                </van-tab>
              </van-tabs>
    </div>
</template>
<script>
import myheader from '@/components/myheader'
import dragverify from 'vue-drag-verify'
export default {
    data() {
        return {
        active: 1,
        username:'',
        password:'',
        mobile:'',
        code:'',
        width:300,
        height:40,
        };
    },
    methods: {
      //用户名登录
        ulogin(){
                if(this.$refs.Verify.isPassing){
                    this.axios.post('users/login/?username='+this.username+'&password='+this.password).then(res=>{
                        if(res.data.code == 200){
                            //存储客户信息
                            localStorage.setItem('userid',res.data.userid)
                            localStorage.setItem('username',res.data.username)
                            this.$toast.success(res.data.msg)
                        }else if(res.data.code == 20030){
                            this.$toast.success(res.data.msg)
                        }else if(res.data.code == 20020){
                            this.$toast.success(res.data.msg)
                        }
                    })
                }
            },
        //手机登录
        mlogin(){
                this.axios.post('users/login/',{params:{code:this.code,mobile:this.mobile}}).then(res=>{
                    if(res.data.code == 200){
                        //存储客户信息
                        localStorage.setItem('userid',res.data.userid)
                        localStorage.setItem('username',res.data.username)
                        this.$toast.success(res.data.msg)
                    }else if(res.data.code == 20040){
                        this.$toast.fail('验证码不存在，请重新发送')
                    }else if(res.data.code == 20050){
                        this.$toast.fail(res.data.msg)
                        }
                    })
                },
        //发送验证码
        sendSms(){
            this.axios.post('users/sendsms',{'mobile':this.mobile}).then(res=>{
                if(res.data.code == 200){
                    this.$toast.success(res.data.msg)
                }else{
                    this.$toast.fail('手机号有误或该手机没注册')
                }
            })
        }
    },
    components:{
        'myheader':myheader,
        'drag-verify':dragverify
    }
}
</script>
<style lang="">
    
</style>
